<template>
  <div class="Singlesong">
    <div class="main">
      <div class="Songlist">
        <div style="font-size:12px;opacity:0.6;" class="div1">
          <span>音乐标题</span>
          <span>歌手</span>
          <span>专辑</span>
          <span>时长</span>
          <span>热度</span>
        </div>
        <div class="Musiclist">
          <div @dblclick="getmusic(item.id,item.name,item.ar,item.al.picUrl,item.dt)" style="" class="div2" v-for="(item,index) in resultsongs" :key="item.id" :class="index%2==0?'p':''">
            <span style="opacity:0.3;font-size:8px;">{{index+1}}</span>
            <i class="iconfont icon-aixin i1"></i>
            <i class="iconfont icon-xiazai i2"></i>
            <p class="span2">{{item.name}}</p>
            <div class="span3">
              <p v-for="item1 in item.ar" :key="item1.id">{{item1.name}}</p>
            </div>
            <p class="span4">{{item.al.name}}</p>
            <p class="span5">01:01</p>
            <p class="span6"></p>
          </div>
          <div style="display:flex;justify-content: center;">
            <el-pagination background layout="prev, pager, next" :total="30" @prev-click="prevclick" @next-click="nextclick">
            </el-pagination>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus.js'
export default {
  name: 'Searchsingle',
  data() {
    return {
      limit: 100,
      offset: 0,
      type: 1
    }
  },
  computed: {
    ...mapState({
      resultsongs: state => state.search.resultsongs.songs
    })
  },
  mounted() {
    this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
  },
  methods: {
    //用户点击上一页
    prevclick() {
      // console.log(2)
      this.offset -= this.limit
      this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
    },
    //用户点击下一页
    nextclick() {
      // console.log(3)
      this.offset += this.limit
      this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
    },
    //双击音乐名字播放音乐
    getmusic(e, n, v, m, time) {
      Bus.$emit('music', e, n, v, m, time)
    }
  }
}
</script>

<style lang="less" scoped>
.Singlesong {
  .main {
    .Songlist {
      margin-left: 90px;
      .div1 {
        display: flex;
        display: grid;
        grid-template-columns: 400px 200px 300px 100px 200px;
      }
    }
    .Musiclist {
      margin-left: -100px;
      margin-top: 10px;
      .div2 {
        display: flex;
        width: 1250px;
        padding: 10px;
        padding-left: 20px;
        .i1 {
          opacity: 0.5;
          margin-left: 10px;
        }
        .i1:hover {
          opacity: 0.8;
          cursor: pointer;
        }
        .i2 {
          opacity: 0.5;
          margin-left: 6px;
        }
        .i2:hover {
          opacity: 0.8;
          cursor: pointer;
        }
        .span2 {
          margin-left: 18px;
          font-size: 14px;
          opacity: 0.8;
          width: 400px;
          overflow: hidden;
        }
        .span3 {
          font-size: 14px;
          opacity: 0.6;
          width: 200px;
          overflow: hidden;
          display: flex;
          p {
            margin-left: 5px;
          }
          p:hover {
            opacity: 0.8;
            color: red;
            cursor: pointer;
          }
        }
        .span4 {
          font-size: 14px;
          opacity: 0.6;
          width: 300px;
          overflow: hidden;
        }
        .span4:hover {
          cursor: pointer;
          color: red;
        }
        .span4:hover {
          cursor: pointer;
          opacity: 0.8;
        }
        .span5 {
          font-size: 12px;
          opacity: 0.5;
          width: 100px;
          overflow: hidden;
        }
        .span {
          width: 100px;
        }
      }
      .div2:hover {
        background-color: rgb(244, 243, 243);
      }
      .p {
        background-color: rgb(248, 250, 250);
      }
    }
  }
}
</style>